<template>
    <div>
        
        <h3 v-bind:key='index' v-for="(value,index) in [1,2,3]">{{value}}</h3>
        <div class="tabs">
        <button 
        v-bind:class="[{'btn-default':true},
        {active:active === index}]"
        v-on:click="active = index" 
        v-for="(value,index) in tabs" 
        v-bind:key="index"
        >
        {{value}}
        </button>
        <h3 v-bind:style="{color:'red' }">style样式</h3>
    </div>
        <div>
            <!-- active:0,index:0 -->
            <h2 
            v-show='active === index' 
            v-for="(value,index) in pans" 
            v-bind:key="index"
            >
            {{value}}
            </h2>
        </div>
        <!-- 写class绑定和style绑定 -->
        <button v-bind:class="[{mayClass:true},{class2:true}]">绑定多个类名</button>
    </div>
    <!-- 选项卡---v-for遍历的,点击任意的选项卡,让当前选项卡的按钮亮起 -->
    
</template>
<script>
export default {
    data(){
        return{
            active:0,//用来激活样式的标识
            tabs:['首页','新闻','产品'],
            pans:['欢迎来到首页',"今日新闻","我是产品"]
        }
    }
}
</script>
<style>
   .btn-default{
       margin: 0 10px;
       background: green;
       border: none;
   } 
   .btn-default.active{
       background: red;
   }


</style>